<template>
    <div class="home-hot">
        <MyPanel title="人气推荐" subTitle="人气爆款 不容错过">
      <!-- 使用默认插槽 -->
          <ul class="goods-list">
          <li class="item" >
          <router-link to="/">
            <img src="../../assets/1.jpg" />
            <div class="title ellipsis-2">可以即食干吃的坚果亚麻籽谷物燕麦片 600克</div>
          </router-link>
        </li>
        <li class="item" >
          <router-link to="/">
            <img src="../../assets/2.jpg" />
            <div class="title ellipsis-2">完整蝴蝶形，新疆原香大核桃仁 110克</div>
          </router-link>
        </li>
        <li class="item" >
          <router-link to="/">
            <img src="../../assets/3.jpg" />
            <div class="title ellipsis-2">无芯软糯的萌妹子，建宁莲子 228克</div>
          </router-link>
        </li>
        <li class="item" >
          <router-link to="/">
            <img src="../../assets/4.jpj.webp" />
            <div class="title ellipsis-2">宛如鲜炖，冻干银耳汤 15克*10袋</div>
          </router-link>
        </li>
          </ul>
        </MyPanel>
    </div>
</template>

<script>
import { getHot } from "@/api";
import { ref } from 'vue';
import MyPanel from '../../components/MyPanel'
export default {
    components:{
        MyPanel
    },
    setup(props) {
    const goods = ref([]);
    const getHotList = async () => {
      try {
        const res = await getHot();
        console.log(res);
        if (res.msg == "操作成功") {
            goods.value=res.result.slice(0,4);
        }
      } catch (error) {
        console.log(error);
      }
    };
    getHotList();

    return { goods };
  }
}
</script>

<style lang="less" scoped>
.home-hot {
  .goods-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .item {
      width: 265px;
      height: 365px;
      background-color: #f5f5f5;
      img {
        width: 265px;
        height: 265px;
      }
      .hoverShadow();
      .title {
        font-size: 17px;
        text-align: center;
        padding: 15px 25px;
      }
      .price {
        text-align: center;
        font-size: 15px;
        color: @priceColor;
        del {
          color: #666;
        }
      }
    }
  }
}
</style>